<template>
  <el-dialog
    v-model="visible"
    :title="$t('添加银行卡')"
    width="600px"
    :fullscreen="isMobile"
    :close-on-click-modal="false"
    @close="handleClose"
  >
  <!-- // 银行卡号
    bankCardNumber: "",
    // 银行名称
    bankName: "",

    //备注
    remark: "",

    //持卡人姓名
    ownerName: "",

    //是否为默认
    isDefault: "", -->
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-width="isMobile ? '90px' : '120px'"
      :label-position="isMobile ? 'top' : 'right'"
    >
      <el-form-item :label="$t('国家/地区')" prop="country">
        <el-input
          v-model="form.country"
          :placeholder="$t('请输入开户国家/地区')"
        />
      </el-form-item>
      <el-form-item :label="$t('卡号')" prop="bankCardNumber">
        <el-input
          v-model="form.bankCardNumber"
          :placeholder="$t('请输入银行卡号')"

        />
      </el-form-item>
      <el-form-item :label="$t('持卡人')" prop="ownerName">
        <el-input
          v-model="form.ownerName"
          :placeholder="$t('请输入持卡人姓名（与银行卡一致）')"
        />
      </el-form-item>

      <el-form-item :label="$t('银行名称')" prop="bankName">
        <el-input
          v-model="form.bankName"
          :placeholder="$t('请输入银行名称')"
        />
      </el-form-item>

<!--      <el-form-item :label="$t('备注')" prop="remark">-->
<!--        <el-input-->
<!--          type="textarea"-->
<!--          v-model="form.remark"-->
<!--          :placeholder="$t('备注')"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item :label="$t('开户支行')" prop="subBranch">
        <el-input
          v-model="form.subBranch"
          :placeholder="$t('请输入开户支行名称')"
        />
      </el-form-item>

      <el-form-item :label="$t('开户行地址')" prop="bankAddress">
        <el-input
          v-model="form.bankAddress"
          :placeholder="$t('请输入开户行详细地址')"
        />
      </el-form-item>

      <el-form-item :label="$t('Swift/BIC代码')" prop="code">
        <el-input
          v-model="form.code"
          :placeholder="$t('请输入Swift/BIC代码(选填)')"
        />
      </el-form-item>

      <el-form-item :label="$t('卡类型')" prop="bankType">
        <el-input
          v-model="form.bankType"
          :placeholder="$t('请输入卡类型，如:储蓄卡/信用卡')"
        />
      </el-form-item>



      <el-form-item>
        <el-checkbox v-model="form.isDefault">{{ $t('设为默认银行卡') }}</el-checkbox>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="handleClose">{{ $t('取消') }}</el-button>
      <el-button type="primary" @click="handleSubmit">{{ $t('确认') }}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'AddBankCard'
})
</script>

<script setup lang="ts">
import { ref, computed } from 'vue'
import type { FormInstance } from 'element-plus'
import { useWindowSize } from '@vueuse/core'
import {useI18n} from "vue-i18n";
const { t } = useI18n();

const props = defineProps<{
  modelValue: boolean,

}>()

const emit = defineEmits(['update:modelValue', 'submit'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const formRef = ref<FormInstance>()

const form = ref({
  country: '',
  ownerName: '',
  bankName: '',
  remark:"",
  subBranch: '',//开户支行
  bankAddress: '',//开户行地址
  code: '',// swift/bic代码
  bankType: '',
  bankCardNumber: '',
  isDefault: false,
})

const rules = {
  country: [
    { required: true, message: t('请输入开户国家/地区'), trigger: 'blur' }
  ],
  ownerName: [
    { required: true, message: t('请输入持卡人姓名'), trigger: 'blur' }
  ],
  bankName: [
    { required: true, message: t('请输入银行名称'), trigger: 'blur' }
  ],
  // remark: [
    // { required: true, message: t('请输入开户支行名称'), trigger: 'blur' }
  // ],
  subBranch: [
    { required: true, message: t('请输入开户支行名称'), trigger: 'blur' }
  ],
  bankAddress: [
    { required: true, message: t('请输入开户行详细地址'), trigger: 'blur' }
  ],
  bankType: [
    { required: true, message: t('请输入卡类型，如:储蓄卡/信用卡'), trigger: 'blur' }
  ],
  bankCardNumber: [
    { required: true, message: t('请输入银行卡号'), trigger: 'blur' },
    // { pattern: /^\d{16,19}$/, message: t('请输入正确的银行卡号'), trigger: 'blur' }
  ]
}

const { width } = useWindowSize()
const isMobile = computed(() => width.value <= 768)

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return

  await formRef.value.validate()

  const newCard = {
    // remark: form.value.remark,
    country: form.value.country,
    bankName: form.value.bankName,
    subBranch: form.value.subBranch,
    bankAddress: form.value.bankAddress,
    code: form.value.code,
    bankType: form.value.bankType,
    bankCardNumber: form.value.bankCardNumber,
    ownerName: form.value.ownerName,
    isDefault: form.value.isDefault
  }

  emit('submit', newCard)
  handleClose()
}

// 关闭弹窗
const handleClose = () => {
  visible.value = false
  formRef.value?.resetFields()
}
</script>

<style lang="scss" scoped>
@media screen and (max-width: 768px) {
  :deep(.el-dialog) {
    margin: 0;

    .el-dialog__header {
      margin-right: 0;
      padding: 16px;
      border-bottom: 1px solid #eee;
    }

    .el-dialog__body {
      padding: 16px;
    }

    .el-dialog__footer {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 16px;
      background: #fff;
      border-top: 1px solid #eee;
      z-index: 10;

      .el-button {
        flex: 1;
        margin: 0;

        & + .el-button {
          margin-left: 12px;
        }
      }
    }
  }

  :deep(.el-form) {
    padding-bottom: 80px;  // 为固定底部按钮留出空间

    .el-form-item {
      margin-bottom: 16px;
    }

    .el-form-item__label {
      float: none;
      display: block;
      text-align: left;
      padding: 0 0 8px;
    }

    .el-form-item__content {
      margin-left: 0 !important;
    }

    .el-input {
      width: 100%;
    }
  }
}

.form-tip {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  line-height: 1.4;
}
</style>
